<template>
  <h3 id="h3">{{ num }}</h3>
  <button @click="add">点击++</button>
  <hr />
  <h3>多数据侦听</h3>
  <h4>{{ a }}------{{ b }}</h4>
  <button @click="a++">修改a</button>
  <button @click="b = Date.now()">修改b</button>
  <hr />
  <h3>侦听响应式数据中某个属性</h3>
  <h4>{{ userInfo }}</h4>
  <button @click="userInfo.age++">修改userInfo内的age</button>
</template>
<script setup>
/*
watch基本使用
 1:导入
 2: const stop=watch(需要侦听的数据,()=>{},{
  deep:深度侦听
  immediate:是否立即执行
  flush:pre(默认):默认是在数据更改了，但页面还没渲染前执行回调
        post：渲染后执行回调函数
        sync:修改一次执行一次回调(渲染前执行)
 })

 watch:某些值的change事件
 watch支持多个值的侦听
 1:导入
 2:const stop=watch([需要侦听的数据a,需要侦听的数据b,....],()=>{},{})

 watch侦听响应式数据中某个属性
 1:导入
 2:const stop=watch(()=>响应式数据中的某个属性,()=>{},{})

vue2
  data(){
      return {
        obj:{
          age:18
        }
      }
  }
  watch:{
    'obj.age':{

    }
  }


  watch:
     某些值的change事件
     用法：
       1:导入
       2:const stop=watch(需要侦听的数据/[需要侦听的数据,需要侦听的数据2]/()=>需要侦听数据的某个属性,(newVal,oldVal)=>{
        newVal:修改后的值
        oldValue:修改前的值
       },{
        deep:是否深度侦听,
        immediate:是否立即执行回调
        flush:pre（渲染前执行）
              post:渲染后执行
              sync:修改一次执行一次回调（渲染前）
       })


*/

import { ref, watch } from 'vue'

// num响应式数据修改与侦听
const num = ref(0)
const stop = watch(
  num,
  newVal => {
    console.log(document.querySelector('#h3').innerHTML)
  },
  {
    flush: 'sync'
  }
)
const add = () => {
  num.value++
  num.value++
}
// 侦听多个数据变化
const a = ref(0)
const b = ref('a')
const stop2 = watch([a, b], newVal => {
  console.log('多数据侦听', newVal)
})

// {age:1} 侦听响应式数据中的一个属性
/*

*/
const userInfo = ref({ age: 18 })
const stop3 = watch(
  () => userInfo.value.age,
  newVal => {
    console.log('侦听响应式数据中的一个属性', newVal)
  },
  {
    deep: true
  }
)
</script>
